<template>
	<a-upload :auto-upload="false" :show-file-list="false" @change="onChange">
		<template #upload-button>
			<div class="arco-upload-list-item">
				<div class="arco-upload-list-picture custom-upload-avatar transparent-bg" v-if="selectedFile.url||props.modelValue">
					<img :src="selectedFile.url||props.modelValue" style="object-fit: contain;"/>
					<div class="arco-upload-list-picture-mask">
						<IconEdit />
					</div>
				</div>
				<div class="arco-upload-picture-card" v-else>
					<div class="arco-upload-picture-card-text">
						<IconPlus />
					</div>
				</div>
			</div>
		</template>
	</a-upload>
</template>
<script setup lang="ts">
import CosClient from "@/utils/cos";
import { IconEdit, IconPlus } from "@arco-design/web-vue/es/icon";
import { onBeforeMount, reactive, ref } from "vue";

const props=defineProps<{
	modelValue:string,
}>()
const emits = defineEmits(["update:modelValue"]);

onBeforeMount(()=>{

})

const selectedFile=reactive<{
	file?:File,
	url?:string
}>({
	file:undefined,
	url:undefined
})
const onChange = (_, currentFile) => {
	selectedFile.file=currentFile.file
	selectedFile.url=currentFile.url
	emits("update:modelValue", currentFile.url);
};

const doUpload=async ():Promise<void>=>{
	if(selectedFile.file){
		let cos=new CosClient()
		let url=await cos.uploadFile(selectedFile.file)
		emits("update:modelValue", url);
	}
}

defineExpose<{
	doUpload:()=>Promise<void>
}>({
	doUpload
})
</script>
<style lang="scss" scoped></style>
